<template>
  <div class="email-container">
    <div class="item-top">
      <div class="title mt-16">AHM Aborad Reports</div>
      <div class="filter-btns">
        <a-radio-group :value="notificationService.ahmAction" @change="change">
          <a-radio value="AND">AND</a-radio>
          <a-radio value="OR">OR</a-radio>
        </a-radio-group>
      </div>

    </div>
    <div class="sub-title">可选</div>
    <a-transfer
      :data-source="AhmList"
      :titles="['', '']"
      :render="item => item.templateName"
      :target-keys="targetKeys"
      :selected-keys="selectedKeys"
      :list-style="{
        width: '50%',
        height: '180px',
      }"
      @change="handleChange"
      @selectChange="handleSelectChange"
      @scroll="handleScroll"
    />
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
export default {

  data() {
    return {
      targetKeys: [],
      selectedKeys: []
    };
  },
  computed: {
    ...mapState('emailNotification', ['notificationService', 'AhmList'])
  },
  // mounted() {
  //   this.AHMList.forEach(item => {
  //     item.key = item.id;
  //   });
  // },
  methods: {
    ...mapMutations('emailNotification', ['setState']),
    change(e) {
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, ahmAction: e.target.value }});
    },
    handleChange(nextTargetKeys, direction, moveKeys) {
      this.targetKeys = nextTargetKeys;
    },
    handleSelectChange(sourceSelectedKeys, targetSelectedKeys) {
      this.selectedKeys = [...sourceSelectedKeys, ...targetSelectedKeys];
      this.setState({ key: 'notificationService', payload: { ...this.notificationService, ahmList: targetSelectedKeys }});
    },
    handleScroll() {

    }
  }
};
</script>
<style lang="less" scoped>
.container {
    margin: 20px 0;
    h4 {
        text-align: left;
        padding-left: 30px;
    }
}
</style>
